@import "./fnList.less";

.skeleton();
.skt-loading {
    pointer-events: none; /* 加载中阻止事件 */
    .skeleton();
}
/*遮罩*/
.mask{
    overflow: hidden;
}
.bgUrl(){
    background:url("../images/icon/sprites.png") no-repeat;
}
body{
    background: #f4f4f4;
}
/*头部*/
.travel-d-header{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    width: 100%;
    height: 44px;
    background: rgba(0,0,0,.3);
    color: white;
    text-align: center;
    line-height: 44px;
    font-size: 15px;
    z-index: 999;
    a{
        display: inline-block;
        position: absolute;
        width: 17.5px;
        height: 17.5px;
        .bgUrl();
        background-size: 375px 475px;
    }
    .travel-d-h-return{
       background-position:-50px  -15px;
        
        top: 11.5px;
        left: 21px;
    }
    .seare-bluetooth{
        background-position:-229px -314px;
        top: 11px;
        right: 51px;
     }
     .seare-more{
         text-align: center;
         line-height: 17.5px;
         background: none;
         top:11px ;
         right: 20px;
         color: white;
         font-size: 30px;
     }
}
/*主体内容*/
.trvel-d-section{
    font-size: 16px;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    .section-img{
        width: 100%;
        position: relative;
        img{
            width: 100%;
            .fn-px-rem(height,528);
            display: block;
        }
        p{
            width: 100%;
            position: absolute;
            .fn-px-rem(height,40);
            .fn-px-rem(line-height,40);
            color: white;
            left: 0;
            bottom: 0rem;
            background: rgba(0,0,0,.3s);
            .fn-px-rem(font-size,27);
            .trvel-d-s-address{
                .fn-px-rem(margin-left,40);
                border-right: 2px solid white;
                .fn-px-rem(padding-right,24);
            }
            .trvel-d-s-type{
                .fn-px-rem(padding-left,24);
            }
            .trvel-d-s-ed{
                float: right;
                .fn-px-rem(margin-right,40);
            }
        }
    }
    /*基本介绍价格*/
    .section-introduction-content{
        background: white;
        padding:.10rem .20rem;
        .content-introduction-title{
            .fn-px-rem(font-size,33);
            color: #212121;
        }
        .content-price{
            display: flex;
            position: relative;
            .fn-px-rem(margin-top,74);
            .price{
                .fn-px-rem(font-size,17);
                color: #a9a9a9;
                .fn-px-rem(margin-right,50);
                span{
                    color: #ff4401;
                    .fn-px-rem(font-size,35);
                }
            }
            p{
                .fn-px-rem(font-size,23);
                border: 1px solid #bfbfbf;
                color: #a9a9a9;
                text-align: center;
                .fn-px-rem(height,35);
                .fn-px-rem(line-height,35);
                padding: 0 .02rem;
                background: #eeeeee;
                .fn-px-rem(margin-right,19);
            }
            &::after{
                content: "";
                display: inline-block;
                position: absolute;
                .fn-px-rem(width,158);
                .fn-px-rem(height,25);
                .bgUrl();
                background-size: 3.75rem 4.75rem;
                background-position:-0.20rem -2.12rem;
                top: -0.24rem;
                left: 0;
            }
        }
      
    }
    .section-special{
        background-color: #fdeacc;
        position: relative;
        .fn-px-rem(font-size,22);
        .fn-px-rem(padding,33);
        div{
            position: relative;
            margin-bottom: .10rem;
            a{
                position: absolute;
                .inline-block();
                .fn-px-rem(height,30);
                .fn-px-rem(line-height,30);
                text-align: center;
                border: 1px solid #ef4242;
                color: #ef4242;
                border-radius: .02rem;
                top: 0;
                left: 0;
            }
            ul{
                .fn-px-rem(margin-left,92);

                li{
                    color: #666666;
                    position: relative;
                    &::after{
                        content: "";
                        display: block;
                        .fn-px-rem(width,8);
                        .fn-px-rem(height,8);
                        position: absolute;
                        background: #999999;
                        border-radius: 50%;
                        top: .066rem;
                        left: -0.06rem;

                    }
                }
                li:first-child{
                    padding-left:.05rem;
                }
            }
        }
        .special-cheap{
            a{
                background:#ef4242;
                color: #fad599;
            }
        }

        &::after{
            content: ">";
            display: inline-block;
            position: absolute;
            font-family: "宋体";
            .fn-px-rem(width,16);
            .fn-px-rem(height,30);
            .fn-px-rem(font-size,30);
            top: 50%;
            right: .20rem;
            transform: translate(-0%,-50%);
            color: #666666;
        }
    }
    .section-comment{
        // border: 1px solid red;
        background: white;
        margin: .1rem 0;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        .fn-px-rem(padding,40);
        .comment-t{
            border-bottom:1px solid #cccccc;
            .fn-px-rem(padding-bottom,28);
        .comment-scoring{
            display: flex;
           margin-bottom: .05rem;
          .scoring{
            .fn-px-rem(font-size,30);
            .fn-px-rem(padding-right,17);
            border-right:1px solid #cccccc;
          }
          .travel-numbar{
            .fn-px-rem(font-size,24);
            .fn-px-rem(padding-left,17);
            .fn-px-rem(padding-top,6);
          }
          p{
              color: #666666;
              span{
                  color: #ff4401;
              }
          }
        }
        ul{
            overflow: hidden;
            li{
                float: left;
                .fn-px-rem(font-size,24);
                background: #f5f5f5;
                .fn-px-rem(margin-right,25);
                margin: .06rem 0.125rem 0 0;
            }
        }
    }
    .commnet-b{
        .fn-px-rem(font-size,26);
        margin-top: .1rem;
      
        .b-top{
            display: flex;
            justify-content: space-between;
           
        }
        .b-text{
            margin:.07rem 0;
        }
        .b-btn{
            display: inline-block;
            .fn-px-rem(width,280);
            .fn-px-rem(height,60);
            .fn-px-rem(line-height,60);
            text-align: center;
            border: 1px solid #1ab2db;
            color: #1ab2db;
            border-radius: .05rem;
            margin:.15rem  0 0 50% ;
            transform: translate(-50%);
        
        }
    }
    }
    /*景区详细介绍*/
    .trave-section-detailed{
        background: white;
        border-top:1px solid #ccc ;
        margin-bottom: .50rem;
        .detailed-nav{
            ul{
                display: flex;
                li{
                    width: 33.33%;
                    text-align: center;
                    .fn-px-rem(height,106);
                    .fn-px-rem(line-height,106);
                    color: #666666;
                }
                li.on{
                    color: #1ab2db;
                    position: relative;
                    &::after{
                        content: "";
                        display: block;
                        width: 100%;
                        .fn-px-rem(height,8);
                        background: #f7c612;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }
            }
        }
        .detailed-content-features{
            display: block;
            background: #6f9abe;
            img{
                display: block;
                width: 100%;
            }
           
        }
        
        .datailed-content-detailed{
            display: none;
            width:100%;
            font-size:.12rem;
            text-transform: none;
            color:#666666;
                  font-weight: bold;  
            position:relative;
            .content-detailed{
                // border:1px solid red;
                width:2.85rem;
                margin: .275rem auto;
                padding: 0 .09rem;
                border-left: 1px dotted #2F90BB;
                .detailed-day{
                    position: absolute;
                    left: -.04rem;
                    top: 0;
                    width:0.38rem;
                    height:0.18rem;
                    line-height: 0.18rem;
                    color: white;
                    font-size:.001rem;
                    transform: scale(.8);
                    .bgUrl();
                    background-size: 3.75rem 4.75rem;

                    background-position:-124.5px -208.5px;
                }
                .morning-img{
                    margin-left: 0.36rem;
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 0.07rem;
                
                    span{
                        margin: 0.03rem;
                        img{
                            width:1.15rem;
                            height:1rem;
                            display:block;
                            
                        }
                    }
                }
                .detailed-morning{
                    font-size:0.12rem;
                    font-family:"SourceHanSansCN";
                    color:rgba(102,102,102,1);
                    
                    p:first-child{
                        margin-bottom: .175rem;
                    
                    }
                    p:nth-child(2){
                        margin-bottom: 0.14rem;
                        .detailed-time{
                            margin-left:.1rem;
                        }
                    }
                    p:nth-child(3){
                        .detailed-time{
                            margin-left:.05rem;
                        }
                    }
               
                }
                .detailed-noon{
                    p:first-child{
                        margin:.18rem  0 .11rem 0 ;
                    }
                        .detailed-time{
                            margin-left: 0.09rem;
                        }
                }
                .detailed-evening{
                    p:first-child{
                        margin-top:.18rem;
                    }
                    .detailed-time{
                        margin-left: 0.09rem;
                    }
                }
                .detailed-time{
                    background:white;
                    border:1px solid #cccccc;
                    color: #999;             
                    font-weight: 200;
                   
                }
                
                /*左边圆点*/
                p{position:relative;
                    &::after{
                    content:"";
                    display: inline-block;
                    width:0.06rem;
                    height:0.06rem;
                    background:rgba(47,144,187,1);
                    border-radius:50%;
                    position: absolute;
                    left:-0.12rem;
                    top: 50%;
                    transform: translate(0,-50%);
                }}
            }
          
        }
        .datailed-content-instructions{
            display:none;
            font-size:0.14rem;
            font-family:SourceHanSansCN;
            font-weight:400;
            color: #252525;
            line-height:0.18rem;
            position: relative;
            .content-instructions{
                width:3.03rem;
                margin:  .2rem auto;
              
                h4{
                    width:0.6rem;
                    height:0.14rem;
                    font-size:0.15rem;
                    font-family:SourceHanSansCN;
                    font-weight:400;
                    color:rgba(26,178,219,1);
                    line-height:0.12rem;
                }
                p{
                    display:box;
                    // letter-spacing:50;//间距
                    margin: 0.16rem 0;
                    text-align:justify;
                    // text-align-last:justify;
                    span{
                        display:block;
                    }
                }
                &::after{
                    position: absolute;
                    content: "";
                    display: inline-block;
                    width:0.2rem;
                    height:0.21rem;
                    top: 0;
                    left: 0.08rem;
                    .bgUrl();
                    background-size: 3.75rem 4.75rem;
                    background-position: -1.81rem -2.07rem;
                }
            }
        }
    }
}
/* 尾部*/
.trave-d-footer{
    width: 100%;
    font-size: 16px;
    position: fixed;
    left:0;
    bottom: 0;
    display:flex ;
    
    a{
        display: inline-block;
        .fn-px-rem(height,80);
        .fn-px-rem(line-height,80);
        flex-grow: 2;
        background: #ededed;
        border-top:1px solid #dcdcdc;
        border-right:1px solid  #dcdcdc;
      
        position: relative;
        &::after{
            position: absolute;
            content: "";
            display: inline-block;
            .fn-px-rem(width,55);
            .fn-px-rem(height,55);
            .bgUrl();
            background-size: 3.75rem 4.75rem;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
    }
    .d-footer-gefällt{
        &::after{
            background-position: -2.32rem -1.65rem;
        }
    }
    .d-footer-add{
        &::after{
            background-position: -2.74rem -1.65rem;
        }
    }
    .d-footer-service{
        border-right:none;
        &::after{
            background-position: -3.1rem -1.63rem;
        }
    }
    .d-footer-reservation{
        flex-grow: 4;
        text-align: center;
        background: #f1a30f;
        color: white;
        .fn-px-rem(font-size,38);
        &::after{
            content: none;
        }
    }
}
